<template>
  <div class="map-viewport">
    <div
      class="map"
      ref="map"
      @mousedown="startDragMap"
      @mousemove="dragMap"
      @mouseup="stopDragMap"
      @mouseleave="stopDragMap"
      @wheel="handleWheel"
    >
      <div
        v-for="(piece, index) in localPieces"
        :key="index"
        class="chess-piece"
        :style="{
          left: piece.x + 'px',
          top: piece.y + 'px',
          transform: `rotate(${piece.rotation}deg)`,
          backgroundImage: `url(${piece.isHover ? piece.hoverGif : piece.normalImg})`,
          filter: piece.isHover ? 'drop-shadow(0 0 8px rgba(255, 255, 0, 0.8))' : 'none'
        }"
        @mouseenter="handleMouseEnter(index)"
        @mouseleave="handleMouseLeave(index)"
        @mousedown.stop="startDragPiece(index, $event)"
      >
        <div
          class="name-tag"
          :style="{ color: piece.nameColor }"
          contenteditable
          @click.stop
          @blur="updateName(index, $event)"
          @keydown.enter="$event.target.blur()"
        >
          {{ piece.name }}
        </div>
      </div>
    </div>

    <!-- 地图右下角嵌入窗口 -->
    <div class="bottom-right-panel">
      <div class="panel-header">信息控制台</div>
      <div class="panel-body">
        <p>这里可以放置控制按钮、信息摘要、图层切换、缩放控件等。</p>
        <p>你可以自定义内容，根据需求展示不同功能。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pieces: Array
  },
  data() {
    return {
      localPieces: [],
      isMapDragging: false,
      mapStartX: 0,
      mapStartY: 0,
      isPieceDragging: false,
      currentPiece: null,
      pieceStartX: 0,
      pieceStartY: 0
    };
  },
  mounted() {
    this.localPieces = JSON.parse(JSON.stringify(this.pieces));
  },
  methods: {
    startDragMap(e) {
      if (e.target === this.$refs.map) {
        this.isMapDragging = true;
        this.mapStartX = e.clientX - this.$refs.map.offsetLeft;
        this.mapStartY = e.clientY - this.$refs.map.offsetTop;
        this.$refs.map.style.cursor = 'grabbing';
      }
    },
    dragMap(e) {
      if (this.isMapDragging) {
        const viewport = this.$el.querySelector('.map-viewport');
        const map = this.$refs.map;
        
        if (!viewport || !map) return;  // 防止 null 报错        
        const newX = e.clientX - this.mapStartX;
        const newY = e.clientY - this.mapStartY;
        const minX = viewport.offsetWidth - map.offsetWidth;
        const minY = viewport.offsetHeight - map.offsetHeight;
        map.style.left = Math.max(Math.min(newX, 0), minX) + 'px';
        map.style.top = Math.max(Math.min(newY, 0), minY) + 'px';
      }
    },
    stopDragMap() {
      this.isMapDragging = false;
      this.$refs.map.style.cursor = 'grab';
    },
    startDragPiece(index, e) {
      this.isPieceDragging = true;
      this.currentPiece = index;
      this.pieceStartX = e.clientX - this.localPieces[index].x;
      this.pieceStartY = e.clientY - this.localPieces[index].y;
      document.addEventListener('mousemove', this.dragPiece);
      document.addEventListener('mouseup', this.stopDragPiece);
    },
    dragPiece(e) {
      if (this.isPieceDragging) {
        this.localPieces[this.currentPiece].x = e.clientX - this.pieceStartX;
        this.localPieces[this.currentPiece].y = e.clientY - this.pieceStartY;
      }
    },
    stopDragPiece() {
      this.isPieceDragging = false;
      document.removeEventListener('mousemove', this.dragPiece);
      document.removeEventListener('mouseup', this.stopDragPiece);
      this.emitUpdate();
    },
    handleMouseEnter(index) {
      this.localPieces[index].isHover = true;
    },
    handleMouseLeave(index) {
      this.localPieces[index].isHover = false;
    },
    handleWheel(e) {
      if (this.currentPiece !== null) {
        e.preventDefault();
        const delta = e.deltaY > 0 ? -5 : 5;
        this.rotatePiece(delta);
      }
    },
    rotatePiece(deg) {
      if (this.currentPiece !== null) {
        this.localPieces[this.currentPiece].rotation += deg;
        this.localPieces[this.currentPiece].rotation %= 360;
        this.emitUpdate();
      }
    },
    updateName(index, e) {
      this.localPieces[index].name = e.target.innerText.trim() || '未命名';
      this.emitUpdate();
    },
    emitUpdate() {
      this.$emit('update:pieces', this.localPieces);
    }
  }
};
</script>

<style scoped>
.map-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.map {
  position: absolute;
  width: 800px; /* 设置地图宽度 */
  height: 600px; /* 设置地图高度 */
  background: url('@/assets/map-background.png') no-repeat center center;
  background-size: cover;
  cursor: grab;
  overflow: hidden;
  left: 20px;  /* 调整地图的左侧位置 */
  top: 100px;  /* 调整地图的顶部位置 */
}

.chess-piece {
  position: absolute;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.name-tag {
  position: absolute;
  bottom: -20px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  cursor: text;
}

.bottom-right-panel {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 240px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  padding: 10px;
  font-size: 14px;
  z-index: 10;
}

.bottom-right-panel .panel-header {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

.bottom-right-panel .panel-body {
  line-height: 1.4;
}
</style>
